<template>
	<view ref="person">
		<view>
			
		<view v-if="customerList != ''">
			<checkbox-group @change="checkboxChange">
			<uni-card :is-shadow="false" v-for="(item,index) in customerList" :key="index" @click="detail(item)">
			<view class="flex_between">
			  <p class="grid-integral">客户姓名：{{ item.name }}
			    <personalGreen v-if="item.isCertify == 1" class="certiyImg"/>
			    <personalGray v-if="item.isCertify == 0" class="certiyImg"/>
			  </p>
			  <view @click.stop>
			  <checkbox style="transform:scale(0.7)" color="#00a660" :value="item.id.toString()"
			            :checked="item.checked"/>
						</view>
			</view>	
			<p class="grid-integral">客户手机号：{{ item.mobile }}</p>
			<p class="grid-integral">客户邮箱：<span v-if="item.email != null">{{ item.email }}</span>
			<span v-else>--</span></p>
			<p class="grid-integral">客户类别：
			<template v-for="(dictItem, index) in dicts.ec_customer_type">
			  <template v-if="item.customerType == dictItem.value">
			    <uni-tag :text="dictItem.text" size="small" :type="dictItem.type"/>
			  </template>
			</template>
			</p>
			<view slot="actions" class="card-actions" style="padding: 0 20rpx;">
				<view>黑名单：
				  <span @click.stop="switchChange(item,index)">
				  	<switch color="red" style="transform:scale(0.7)" :checked="item.status == 1 ?true:false" disabled />
				  </span>
				</view>
				<view class="flex_between">
				<view class="card-actions-item" @click.stop="handleEdit(item)">
				  <text class="card-actions-item-text themeColor">修改</text>
				</view>
			  <view class="card-actions-item" @click.stop="handleDelete(item)" style="margin-right: 0;">
			    <text class="card-actions-item-text errorColor">删除</text>
			  </view>
			  </view>
			</view>
		</uni-card>
		</checkbox-group>
		<!-- 加载更多 -->
		<uni-load-more color="#00a660" :status="loadStatus"/>
		</view>
		<!-- 暂无数据 -->
		<luanqingEmpty :show="true" text="没有更多数据啦" v-else />
		</view>
		<!-- 底部全选/合并开票 -->
		<view class="foot-menu flex_between">
		  <checkbox-group @change="checkboxAllChange">
		    <label>
		      <checkbox
		          style="transform:scale(0.7)"
		          color="#00a660"
		          :checked="allFlag.checked"
		          :value="allFlag.cb"/>
		      全选
		    </label>
		  </checkbox-group>
		  <view>
		    <button size="mini" class="red_btn" :disabled="multiple" @click="handleDelete()">批量删除</button>
		  </view>
		</view>
	</view>
</template>

<script>
	import personalGray  from "@/components/svg/personalGray"
	import personalGreen  from "@/components/svg/personalGreen"	
	import {getDictsByNameForUni} from "@/utils/dicts";
	import {changeStatus,delCustomerPerson,getCustomerPerson,listCustomerPerson } from "@/api/ec/work/customer/customerPerson";
	import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
	export default {
		name: "customerPerson",
		components:{
			luanqingEmpty,personalGray,personalGreen
		},
		props:{
			// 查询参数
			findApi: {
				type: String,
				default:null
			},  
		},
		data() {
			return {
				// 全选框
				allFlag: {
				  value: 'cb',
				  checked: false
				},
				// 选中数组
				ids: [],
				// 非多个禁用
				multiple: true,
				// 数据字典
				dicts: {
				  ec_customer_type: [],
				},
				total:0, //总条数
				loadStatus:'loading', //是否加载中 //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				// 查询参数
				queryParams: {
				  pageNum: 1,
				  pageSize: 10,
				  isCertify: null,
				  status: null,
				  params: {
				    findApi: undefined
				  }
				},  	
			    customerList: [], //个人客户 
			}
		},
		created(){
			this.getList();
			// 从详情页返回该页面的刷新数据 
			uni.$on('refreshData',() => {
				this.getList();
			})	
		},
		methods: {
			/** 全选复选框的checkbox-group  changge事件 */
			checkboxAllChange(e) {
			  // 选中的选项数据
			  let selection = [];
			  // 取消全选
			  if (e.detail.value.length == 0) {
			    this.customerList.map(item => this.$set(item, 'checked', false));
			    this.$set(this.allFlag, 'checked', false);
			    selection = [];
			  } else {
			    // 全选
			    this.customerList.map(item => {
			      this.$set(item, 'checked', true);
			      selection.push(item);
			    });
			    this.$set(this.allFlag, 'checked', true);
			  }
			  this.handleSelectionChange(selection);
			},
			/** 复选框组合的checkbox-group  changge事件*/ 
			checkboxChange(e) {
			  let items = this.customerList;
			  let values = e.detail.value;
			  for (let i = 0, lenI = items.length; i < lenI; ++i) {
			    const item = items[i];
			    if (values.includes(item.id.toString())) {
			      this.$set(item, 'checked', true);
			    } else {
			      this.$set(item, 'checked', false);
			    }
			  }
			  // 是否全部勾选，判断全选与否状态
			  let offCarArr = [];
			  this.customerList.forEach(item => offCarArr.push(item));
			  let allChecks = offCarArr.every(item => item.checked == true);
			  allChecks ? this.$set(this.allFlag, 'checked', true) : this.$set(this.allFlag, 'checked', false);
			
			  // 选中的选项数据
			  let selection = [];
			  this.customerList.forEach(item => (item.checked) ? selection.push(item) : '');
			  this.handleSelectionChange(selection);
			},
			/** 多选框选中数据 */
			handleSelectionChange(selection) {
			  this.ids = selection.map(item => item.id);
			  this.multiple = !selection.length;
			},
			/**加载数据字典*/
			getDicts() {
			  this.dicts.ec_customer_type = getDictsByNameForUni("ec_customer_type");
			},
			/** 查看详情 */
			detail(item){
				// type == 0 修改新增  1查看详情  
				getCustomerPerson(item.id).then((response)=>{
					let form = response.data
					uni.navigateTo({
						url:'./personalchangeView?item='+JSON.stringify(form)+'&type='+ 1
					})
				})
			},
			/** 黑名单 */	
			switchChange(item,index){
				let text = item.status == 1 ? "移除" : "加入";
				var that = this
				uni.showModal({
					title: '系统提示',
					confirmColor:'#00a660',
					content: '确认将该联系人 " ' + text + ' " 黑名单吗？',
					success: function (res) {
						if (res.confirm) {
							let statusEx = item.status == 1 ? 0 : 1;
							const param ={id: item.id, status: statusEx}
							changeStatus(param).then(response=>{
							that.getList(true)
							uni.showToast({title: text + '黑名单成功'});
					    })
						} else if (res.cancel) {
							
						}
					 }
				});
			},
			/** 修改 */
			handleEdit(item){
				// type == 0 修改新增 1查看详情
				getCustomerPerson(item.id).then((response)=>{
					let form = response.data
					uni.navigateTo({
						url:'./personalchangeView?item='+JSON.stringify(form)+'&type='+ 0
					})
				})	
			},
			/** 删除 */
			handleDelete(item){
				uni.showModal({
					title: '系统提示',
					confirmColor:'#00a660',
					content: '确定要删除该联系人吗？ 删除后数据不可恢复，是否确定删除？',
					success: function (res) {
						if (res.confirm) {
							const ids = (!!item) ? item.id : this.ids;
							delCustomerPerson(ids);
							this.getList(true)
							uni.showToast({title: '删除成功'});
						} else if (res.cancel) {
						}
					 },
				})
			},
			/** 个人客户 */
			getList(reload) {
			  if (reload) {
			    this.queryParams.pageNum = 1;
			    this.loadStatus = 'more'
          this.$modal.loading();
			  }
			  this.queryParams.params.findApi = this.findApi;
			  listCustomerPerson(this.queryParams).then(response => {
			    if (reload) {
			      uni.hideLoading()
			    }
				this.getDicts()
			    this.total = response.total;
			    if (response.total > 0) {
			      const dataRows = response.rows;
			      this.customerList = reload ? dataRows : this.customerList.concat(dataRows);
			    } else {
			      this.customerList = [];
			    }
			    // 判断数据是否加载完全
			    if (response.total <= this.customerList.length) {
			      this.loadStatus = 'noMore'
			    }
			    // 页数+1
			    this.queryParams.pageNum++
			  }).catch(() => {
			    if (reload) {
			      uni.hideLoading()
			    }
			  });
			},
			/** 上拉刷新回调 */
			loadMore() {
			  if (this.loadStatus != 'noMore' && this.total > this.customerList.length) {
			    this.loadStatus = 'loading';
			    // 延迟500毫秒显示loading效果
			    setTimeout(() => {
			      // 执行查询的方法
			      this.getList(false);
			    }, 500)
			  } else {
			    // 停止加载
			    this.loadStatus = 'noMore'
			  }
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-card .uni-card__content{
		padding-bottom: 0 !important;
	}
	.certiyImg{
		width: 26rpx;
		height: 26rpx;
		margin-left: 3rpx;
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 8rpx;
	}
	.foot-menu {
	  width: 100%;
	  height: 100rpx;
	  background: #fff;
	  position: fixed;
	  padding: 0 25rpx;
	  bottom: 0; /**距离底部为0*/
	  left: 0;
	  z-index: 1;
	  border-top: 2rpx #ebeef5 solid;
	  display: flex;
	}
</style>
